<template>
  <a-modal title-align="start" :footer="false" :mask-closable="false" v-model:visible="showvisible" @cancel="close" :width="1200">
    <template #title>
      <a-space style="position: relative; width: 100%">
        <div>详情-{{ typeMap[taskDetailInfo.type] }}任务 </div>
        <div>
          <CopyText :val="taskDetailInfo.code">
            <template #defaultVal>{{ taskDetailInfo.code }}</template>
          </CopyText>
        </div>
        <div class="status ml10">{{ tabKeyMap[taskDetailInfo.status] }}</div>
        <div class="btn-con fr">
          <!-- <a-button size="mini" class="gray-outline mr10">编辑</a-button>
          <a-button size="mini" class="gray-outline mr10">删除</a-button>
          <a-button size="mini" class="gray-outline mr10">撤回</a-button> -->
        </div>
      </a-space>
    </template>
    <div class="detail-con">
      <div class="left">
        <div class="base-info">
          <a-descriptions :data="baseDescData" :column="2" bordered :label-style="{ textAlign: 'right' }">
            <template #label="{ label, data }">
              <div v-if="label != '任务服务费'">{{ label }}：</div>
              <div v-else style="color: red">{{ label }}：</div>
            </template>
            <template #value="{ value, data }">
              <div v-if="data.label == '任务发起组织'">{{ taskDetailInfo.companyShortName ? taskDetailInfo.companyShortName : '--' }}</div>
              <div v-if="data.label == '接单组织'">{{ $extract(props.info, 'takeCompany.companyShortName') ? $extract(props.info, 'takeCompany.companyShortName') : '--' }}</div>
              <div v-if="data.label == '任务创建人'">{{ taskDetailInfo.createUname }}</div>
              <div v-if="data.label == '任务服务费'" style="color: red">￥{{ taskDetailInfo.amtCost }}</div>
              <div v-if="data.label == '任务雇主'">{{ $extract(taskDetailInfo, 'employer.name') }}</div>
              <div v-if="data.label == '任务验收人'">
                <div v-if="taskDetailInfo.verifyerList">
                  <span>{{ taskDetailInfo.verifyerList.map((e: any) => e.name).join(',') }}</span>
                  <!-- <span v-if="form.userName != userInfo.userName && form.userName">,{{ form.userName }}</span> -->
                </div>
                <div class="common-text">多个验收人只需其中1人验收通过即可</div>
              </div>
              <!-- <div v-if="data.label == '紧急程度'">
                <div class="level-btn level-1" v-if="taskDetailInfo.priority === 'URGENT'"> 急 </div>
                <div class="level-btn level-2" v-else-if="taskDetailInfo.priority === 'HIGH'"> 高 </div>
                <div class="level-btn level-3" v-else-if="taskDetailInfo.priority === 'MIDDLE'"> 中 </div>
                <div class="level-btn level-4" v-else> 低 </div>
              </div> -->
              <div v-if="data.label == '期望交付日期'">{{ $setTime(taskDetailInfo.gmtExpectDelivery, 'YYYY/MM/DD') }}</div>
              <div v-if="data.label == '创建时间'">{{ $setTime(taskDetailInfo.gmtCreate, 'YYYY/MM/DD HH:mm') }}</div>
              <div v-if="data.label == '发布时间'">{{ $setTime(taskDetailInfo.gmtPublish, 'YYYY/MM/DD HH:mm') }}</div>
              <div v-if="data.label == '接单时间'">{{ $setTime(taskDetailInfo.gmtTake, 'YYYY/MM/DD HH:mm') }}</div>
              <div v-if="data.label == '到样时间'">{{ $setTime(taskDetailInfo.gmtSampleDelivery, 'YYYY/MM/DD HH:mm') }}</div>
              <div v-if="data.label == '排期时间'">{{ $setTime(taskDetailInfo.gmtSchedule, 'YYYY/MM/DD HH:mm') }}</div>
              <div v-if="data.label == '完成时间'">{{ $setTime(taskDetailInfo.gmtFinish, 'YYYY/MM/DD HH:mm') }}</div>
            </template>
          </a-descriptions>
        </div>
        <a-tabs>
          <a-tab-pane title="任务需求" key="任务需求" class="tab-item">
            <a-scrollbar style="height: 300px; overflow: auto">
              <div>
                <div class="show-sku-info">
                  <div>
                    <div class="top">
                      <div class="img">
                        <ImgPopover :src="imgUrl">
                          <template #con>
                            <a-image :preview="false" width="60" height="60" fit="contain" :src="imgUrl" />
                          </template>
                        </ImgPopover>
                      </div>
                      <div class="descriptions">
                        <a-descriptions size="mini" :data="descriptionsData" :column="2" :label-style="{ textAlign: 'right' }">
                          <template #label="{ label, data }">
                            <div>{{ label }}：</div>
                          </template>
                          <template #value="{ value, data }">
                            <div v-if="data.label == '名称'">
                              <TextLimit position="top" :rows="1" :val="skuInfo.skuName"></TextLimit>
                            </div>
                            <div v-if="data.label == 'SPU'">
                              {{ skuInfo.spu }}
                            </div>
                            <div v-if="data.label == 'SKU'">
                              {{ skuInfo.sku }}
                            </div>
                            <div v-if="data.label == '类目'">
                              {{ $extract(skuInfo, 'category.name') }}
                            </div>
                            <div v-if="data.label == '主开发'">
                              {{ $extract(skuInfo, 'developer.name') }}
                            </div>
                            <div v-if="data.label == '首次入FBA仓日期'">
                              {{ $setTime(skuInfo.gmtWarehousing) }}
                            </div>
                          </template>
                        </a-descriptions>
                      </div>
                    </div>
                    <div class="bottom mt10">
                      <!-- <span>橱窗图:{{ skuInfo.productPicList ? skuInfo.productPicList.length : '0' }}</span>
                      <span>原图:{{ artworkMasterNum }}</span>
                      <span>手绘稿:{{ sketchNum }}</span>
                      <span>CAD文件:{{ cadNum }}</span> -->
                      <span style="margin-right: 40px">采购下单时间：{{ $setTime($extract(skuInfo, 'gmtPurchase'), 'YYYY-MM-DD HH:mm') }}</span>
                      <span style="margin-right: 40px">采购入库时间：{{ $setTime($extract(skuInfo, 'gmtPurchaseWarehouse'), 'YYYY-MM-DD HH:mm') }}</span>
                      <span style="margin-right: 40px">货件发货时间：{{ $setTime($extract(skuInfo, 'gmtShipmentShipped'), 'YYYY-MM-DD HH:mm') }}</span>
                      <span>货件入库时间：{{ $setTime($extract(skuInfo, 'gmtShippmentWarehouse'), 'YYYY-MM-DD HH:mm') }}</span>
                    </div>
                  </div>
                </div>
                <viewNewCollection :info="taskDetailInfo" v-if="taskDetailInfo.type == 'NEW_PRODUCT_PICTURE'" :getDetail="getDetail" />
                <viewArtwork :info="taskDetailInfo" v-if="taskDetailInfo.type == 'ORIGINAL_PICTURE'" :getDetail="getDetail" />
                <viewQuickRetouching :info="taskDetailInfo" v-if="taskDetailInfo.type == 'QUICK_FIX_PICTURE'" :getDetail="getDetail" />
                <viewShootVideo :info="taskDetailInfo" v-if="taskDetailInfo.type == 'SHOOT_VIDEO'" :getDetail="getDetail" />
              </div>
            </a-scrollbar>
          </a-tab-pane>
          <a-tab-pane title="任务交付" key="任务交付" class="tab-item">
            <taskDeliveryData ref="delivery" :info="taskDetailInfo" />
          </a-tab-pane>
        </a-tabs>
      </div>
      <div class="right">
        <a-tabs>
          <a-tab-pane title="留言板" key="留言板">
            <messageBoard :info="taskDetailInfo" ref="msg" />
          </a-tab-pane>
          <a-tab-pane title="日志" key="日志">
            <log :info="taskDetailInfo" ref="Log" />
          </a-tab-pane>
        </a-tabs>
      </div>
    </div>
  </a-modal>
</template>

<script lang="ts" setup>
  import { ref, computed, onMounted } from 'vue'
  import { getTaskById } from '@/api/task'
  import { getSkuDetailBySku } from '@/api/product'
  import viewNewCollection from './viewNewCollection.vue'
  import viewArtwork from './viewArtwork.vue'
  import viewQuickRetouching from './viewQuickRetouching.vue'
  import viewShootVideo from './viewShootVideo.vue'
  import taskDeliveryData from './taskDeliveryData.vue'
  import messageBoard from './messageBoard.vue'
  import log from './log.vue'

  const typeMap = {
    NEW_PRODUCT_PICTURE: '新品套图',
    QUICK_FIX_PICTURE: '快速修图',
    ORIGINAL_PICTURE: '原图',
    SHOOT_VIDEO: '拍摄视频',
  }
  const tabKeyMap = {
    WAIT_PUBLISH: '待发布',
    WAIT_ACCEPT: '待接单',
    SENDING_SAMPLE: '送样中',
    WAIT_SCHEDULE: '待排期',
    EXECUTING: '执行中',
    WAIT_VERIFY: '待验收',
    FINISHED: '已完成',
    NEGOTIATE_TERMINATED: '协商终止',
    TERMINATED: '已终止',
  }

  const msg = ref()
  const Log = ref()
  const delivery = ref()
  let props = defineProps(['modelValue', 'info'])
  let emits = defineEmits(['save', 'update:modelValue'])
  let showvisible = computed({
    get() {
      return props.modelValue
    },
    set(val) {
      emits('update:modelValue', val)
    },
  })
  const baseDescData = ref([
    { label: '任务发起组织', value: '' },
    { label: '接单组织', value: '' },
    { label: '任务创建人', value: '' },
    { label: '任务服务费', value: '' },
    { label: '任务雇主', value: '' },
    { label: '任务验收人', value: '' },
    // { label: '紧急程度', value: '' },
    { label: '期望交付日期', value: '' },
    { label: '创建时间', value: '' },
    { label: '发布时间', value: '' },
    { label: '接单时间', value: '' },
    { label: '到样时间', value: '' },
    { label: '排期时间', value: '' },
    { label: '完成时间', value: '' },
  ])
  let descriptionsData = ref([
    { label: '名称', value: '' },
    { label: 'SPU', value: '' },
    { label: 'SKU', value: '' },
    { label: '类目', value: '' },
    { label: '主开发', value: '' },
    { label: '首次入FBA仓日期', value: '' },
  ])

  let artworkMasterNum = computed(() => {
    let arr = skuInfo.value.productSpu?.productInfoList || []
    return arr.filter((e: any) => e.type == '原图').length
  })
  let sketchNum = computed(() => {
    let arr = skuInfo.value.productSpu?.productInfoList || []
    return arr.filter((e: any) => e.type == '手绘稿').length
  })
  let cadNum = computed(() => {
    let arr = skuInfo.value.productSpu?.productInfoList || []
    return arr.filter((e: any) => e.type == 'CAD').length
  })

  const skuInfo: any = ref({})
  const taskDetailInfo: any = ref({})
  let imgUrl = ref()
  const getDetail = async () => {
    const res: any = await getTaskById({ id: props.info.id })
    if (res) {
      taskDetailInfo.value = res?.data || {}
      msg.value.getList(taskDetailInfo.value)
      delivery.value.setRes(taskDetailInfo.value)
      Log.value.getList(taskDetailInfo.value.id)
      skuInfo.value = taskDetailInfo.value?.product || {}
      let arr = skuInfo.value?.productPicList || []
      imgUrl.value = arr[0]?.url || ''
      // getSkuDetail(taskDetailInfo.value?.product?.sku)
    }
  }
  const getSkuDetail = async (sku: string) => {
    const res: any = await getSkuDetailBySku(sku)
    if (res) {
      skuInfo.value = res?.data || {}
    }
  }

  const close = () => {
    emits('save')
    showvisible.value = false
  }

  onMounted(() => {
    getDetail()
  })
</script>

<style lang="less" scoped>
  .level-btn {
    width: 20px;
    height: 20px;
    line-height: 20px;
    text-align: center;
    font-size: 12px;
  }

  .level-1 {
    background-color: #ffff80;
    color: black;
  }
  .level-2 {
    background-color: #a30014;
    color: white;
  }
  .level-3 {
    background-color: #d9001b;
    color: white;
  }
  .level-4 {
    background-color: #ec808d;
    color: white;
  }

  .common-text {
    font-size: 12px;
    color: #a39999;
  }

  .tab-item {
    padding-top: 10px;
  }

  .status {
    width: 50px;
    height: 20px;
    text-align: center;
    line-height: 20px;
    color: white;
    background-color: #165dff;
    border-radius: 150px;
    font-size: 12px;
  }
  .btn-con {
    position: absolute;
    right: 50px;
  }

  .detail-con {
    width: 100%;
    display: flex;
    .left {
      flex: 1;
    }
    .right {
      width: 350px;
      margin-left: 5px;
    }
  }

  .show-sku-info {
    width: 100%;
    border: 1px solid #d7d7d7;
    padding: 5px;
    // margin-left: 10px;
    .top {
      height: 55px;
      width: 100%;
      display: flex;
      .img {
        width: 60px;
        height: 60px;
      }
      .descriptions {
        flex: 1;
        margin-left: 10px;
      }
    }
    .bottom {
      height: 40px;
      line-height: 20px;
      font-size: 12px;
      margin-left: 70px;
      color: var(--color-text-3);
      span {
        display: inline-block;
        margin-right: 10px;
      }
    }
  }
</style>
